@use './global.scss' as *;
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';
// flex 布局
@mixin flex($flex-direction: row, $justify-content: center, $align-items: center) {
	display: flex;
	flex-direction: $flex-direction;
	justify-content: $justify-content;
	align-items: $align-items;
}
// 字体设置
@mixin font($font-family: 'Noto Sans SC', $font-size: 16px, $line-height: 14px, $font-weight: 400, $color: none) {
	font-family: $font-family;
	font-weight: $font-weight;
	line-height: $line-height;
	font-size: $font-size;
	color: $color;
}
// pc 端 1920-1440 宽度自适应
@mixin scaleWidth($width: 100%, $min-width: none) {
	flex: 0 0 auto;
	$scale: math.div($width, $pc-max-width);
	@if $min-width != none {
		width: #{'clamp(#{$min-width}, #{$scale * 100vw}, #{$width})'};
	} @else {
		width: #{'clamp(#{$pc-min-width * $scale}, #{$scale * 100vw}, #{$width})'};
	}
}
// 移动端 vw 设置
@mixin mobileVwCalc($size: 0, $property: 'width') {
	#{$property}: calc($size / $mobile-base-width) * 100vw;
}
// 单行多行溢出
@mixin text-overflow($lines: 1, $mode: 'normal') {
	// 默认单行溢出
	@if $lines == 1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	} @else {
		// 多行溢出，控制最大行数
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: $lines; // 限制显示的行数
		overflow: hidden;
		text-overflow: ellipsis;
	}
	@if $mode == 'float' {
		// 处理浮动环绕省略显示文字缩短的情况
		word-break: break-all;
		overflow-wrap: break-word;
	}
}

$breakpoints: (
	mobile: (
		0,
		750px,
	),
	notebook: (
		751px,
		1440px,
	),
	desktop: 1441px,
);

@mixin responsive($devices...) {
	@each $device in $devices {
		@if map.has-key($breakpoints, $device) {
			$breakpoint: map.get($breakpoints, $device);
			@if list.length($breakpoint) == 2 {
				@media (min-width: list.nth($breakpoint, 1)) and (max-width: list.nth($breakpoint, 2)) {
					@content;
				}
			} @else {
				@media (min-width: $breakpoint) {
					@content;
				}
			}
		} @else {
			@warn "No value found for breakpoint: #{$device}";
		}
	}
}
